<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SUI Mobile Demo</title>
    <meta name="description" content="MSUI: Build mobile apps with simple HTML, CSS, and JS components.">
    <meta name="author" content="阿里巴巴国际UED前端">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" th:href="@{/css/suimobile/sm-extend.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/suimobile/sm.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/shop/productManagement.css}">
</head>
<body>
<header class="bar bar-nav">
    <h1 class="title">Product Operation</h1>
</header>
<div class="content">
    <div class="list-block">
        <ul>
            <li>
                <div class="item-content">
                    <div class="item-media">
                        <i class="icon icon-form-name"></i>
                    </div>
                    <div class="item-inner">
                        <div class="item-title label">Product Name</div>
                        <div class="item-input">
                            <input type="text" id="product-name" placeholder="Product Name">
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-media">
                        <i class="icon icon-form-email"></i>
                    </div>
                    <div class="item-inner">
                        <div class="item-title label">Categories</div>
                        <div class="item-input">
                            <select id="category">
                            </select>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-media">
                        <i class="icon icon-form-email"></i>
                    </div>
                    <div class="item-inner">
                        <div class="item-title label">Priority</div>
                        <div class="item-input">
                            <input type="number" id="priority" placeholder="Larger means higher priority">
                        </div>
                    </div>
                </div>
            </li>
<!--            <li>-->
<!--                <div class="item-content">-->
<!--                    <div class="item-media">-->
<!--                        <i class="icon icon-form-email"></i>-->
<!--                    </div>-->
<!--                    <div class="item-inner">-->
<!--                        <div class="item-title label">积分</div>-->
<!--                        <div class="item-input">-->
<!--                            <input type="number" id="point" placeholder="商品积分">-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </li>-->
            <li>
                <div class="item-content">
                    <div class="item-media">
                        <i class="icon icon-form-email"></i>
                    </div>
                    <div class="item-inner">
                        <div class="item-title label">Normal Price</div>
                        <div class="item-input">
                            <input type="number" id="normal-price" placeholder="Optional">
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-media">
                        <i class="icon icon-form-email"></i>
                    </div>
                    <div class="item-inner">
                        <div class="item-title label">Promote Price</div>
                        <div class="item-input">
                            <input type="number" id="promotion-price" placeholder="Optional">
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-media">
                        <i class="icon icon-form-email"></i>
                    </div>
                    <div class="item-inner">
                        <div class="item-title label">Thumbnail</div>
                        <div class="item-input">
                            <input type="file" id="small-img">
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-media">
                        <i class="icon icon-form-email"></i>
                    </div>
                    <div class="item-inner detail-img-div">
                        <div class="item-title label">Detail Image</div>
                        <div class="item-input" id="detail-img">
                            <input type="file" class="detail-img">
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-media">
                        <i class="icon icon-form-email"></i>
                    </div>
                    <div class="item-inner">
                        <div class="item-title label">Product Description</div>
                        <div class="item-input">
                            <textarea id="product-desc" placeholder="Product Description"></textarea>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-media">
                        <i class="icon icon-form-email"></i>
                    </div>
                    <div class="item-inner">
                        <label for="j_captcha" class="item-title label">Captcha</label> <input
                            id="j_captcha" name="j_captcha" type="text"
                            class="form-control in" placeholder="Captcha" />
                        <div class="item-input">
                            <img id="captcha_img" alt="click to refresh" title="click to refresh"
                                 onclick="changeVerifyCode(this)" src="../Kaptcha" />
                        </div>
                    </div>
                </div>
            </li>

        </ul>
    </div>
    <div class="content-block">
        <div class="row">
            <div class="col-50">
                <a href="/o2o/shopadmin/productmanagement"
                   class="button button-big button-fill button-danger" id="back">Back to Shop Management</a>
            </div>
            <div class="col-50">
                <a href="#" class="button button-big button-fill" id="submit">Submit</a>
            </div>
        </div>
    </div>
</div>



<script type="text/javascript" th:src="@{/js/suimobile/zepto.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/js/suimobile/sm.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/js/suimobile/sm-extend.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/js/common/common.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/js/shop/productOperation.js}" charset="utf-8"></script>
</body>
</html>